<template>
  <div class="question">
    <span>{{question}}</span>
  </div>
</template>

<script>
import { mapGetters } from "vuex"
export default {
  data() {
    return {
      overtimer1: null,
      overtimer2: null,
      questionList: [],
      questionIndex: 0
    }
  },
  props: ["assignment"],
  created() {
    this.questionList = this.assignment.question.split("\n")
  },
  mounted() {
    this.overtimer1 = setTimeout(() => {
      if (!this.assignment.isFinish) {
        this.audioPlay()
      }
    }, 0)
  },
  beforeDestroy() {
    clearTimeout(this.overtimer1)
    clearTimeout(this.overtimer2)
    this.parseTextAudio({
      play: false
    })
  },
  computed: {
    questionStyle() {
      const gray = this.assignment.isFinish ? 0 : 1,
        boxShadow = this.assignment.isFinish ? "0px 0px 0.3rem rgb(254, 172, 81)" : "0px 0px 0.3rem rgb(254, 172, 81)"
      return {
        filter: "grayscale(" + gray + ")",
        boxShadow: boxShadow
      }
    },
    question() {
      return this.questionList[this.questionIndex]
    },
    ...mapGetters("assignmentStatus", {
      questionAudio: "getQuestionAudio",
    })
  },
  methods: {
    audioPlay: function () {
      this.parseTextAudio({
        text: this.question,
        speaker: "Aitong",
        end: () => {
          if (this.questionList.length > 1 && this.questionIndex < this.questionList.length - 1) {
            setTimeout(()=>{
              this.questionIndex++
              this.audioPlay()
            },2000)
          }
          else {
            this.overtimer2 = setTimeout(() => {
              if (!this.assignment.operated) {
                this.questionIndex = 0
                this.audioPlay()
              }
            }, 5000)
          }
        }
      })
    }
  },
  watch: {
    questionAudio: function (bool) {
      if (bool) this.audioPlay()
    }
  }
}
</script>

<style scoped lang='stylus'>
.question
  position absolute
  $coord('WHRT', 9.5rem, 0rem, 1rem, 1rem)
  min-height 2.5rem
  height auto
  z-index 99
  $alignCenter()
  text-align left
  transform translate(var(--X), calc(0px - var(--Y)))
  border-radius 0.6rem
  padding 1rem
  font-size 0.8rem
  color rgb(254, 172, 81)
  font-weight 700
  text-indent 1rem
  background url($urlTitle + 'assignment/问题框背景.png') 0 0 / 100% 100%
  .mark
    background url($urlTitle + 'assignment/问题点.png') 0 0 / 100% 100%
    $coord('WHLT', 1rem, 1rem, 0.4rem, 0.3rem)
    border-radius 50%
    transition all 0.8s
</style>
